<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Path</title>
</head>
<body>
  <canvas id="mycanvas" width="600" height="600"></canvas>
  <script src="/js/sprite-core.js"></script>
  <script>
    const Path = spritejs.Path;
    const Sprite = spritejs.Sprite;
    const Layer = spritejs.Layer;
    const context = document.getElementById('mycanvas').getContext('2d');
    const layer = new Layer({context});

    const paths = [
      'M280,250A200,200,0,1,1,680,250A200,200,0,1,1,280,250Z',
      'M0,0L0,400L400,400L400,0z',
    ];
    const path = new Path();
    path.attr({
      path: {d: paths[0], transform: {scale: 0.1}, trim: true},
      anchor: 0.5,
      pos: [300, 300],
      strokeColor: 'blue',
      lineWidth: 1,
    });
    layer.append(path);
    
    const p2 = path.cloneNode(true);
    p2.attr({x: x => x + 42});
    layer.append(p2);

    const p3 = path.cloneNode(true);
    p3.attr({x: x => x - 42});
    layer.append(p3);

    const s2 = new Sprite();
    s2.attr({
      size: [30, 30],
      border: [1, 'blue'],
      pos: [100, 100],
    });
    layer.append(s2);

    const sprite = new Sprite();
    sprite.attr({
      size: [50, 50],
      bgcolor: 'red',
    });

    layer.append(sprite);
  </script>
</body>
</html>